<template>
  <div class="todolist">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="contentOne">
        <a-layout>
          <a-layout-sider style="max-width: 220px; min-width: 220px; width: 220px;">
            <div style="display: flex; flex-flow: column; width: 100%; align-items: center; margin-top: 54px">
              <div style="display: flex; flex-flow: column; margin: auto; margin-bottom: 50px">
                <div style="margin: auto">
                  <a-avatar :size="80" :src="avatarUrl" />
                </div>
                <div style="font-size: 20px; font-weight: bold; color: #fff; margin: auto; margin-top: 20px">
                  <span>{{ userinfo.info.realname }}</span>
                </div>
                <div style="margin-top: 10px; font-size: 13px; color: #afbfe1">
                  <span>{{ userinfo.info.deptName || '' }}</span>
                </div>
              </div>
            </div>
            <div class="project-box">
              <div v-for="item of navList" :class="item.type" :key="item.name" @click="handlePage(item.url)" v-has="item.limit" :title="item.title">
                <i v-if="item.type!='thinkTank'" class="iconfont" :class="'icon-' + item.icon"></i>
                <svg-icon v-else class-name="think-icon" :iconClass="item.name"></svg-icon>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </a-layout-sider>
          <a-layout>
            <a-layout-content>
              <div class="firstDiv">
                <div style="padding: 19px 32px; border-bottom: 1px solid #f2f2f2">
                  <span>统计年份</span>
                  <a-select v-model="searchYear" @change="changeYear" class="select-width-200">
                    <a-select-option :value="item.code" v-for="item in yearList" :key="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </div>
                <ul class="left">
                  <li>
                    <i class="iconfont icon-xiangmu3"></i>
                    <span class="fontTextStyle">项目总数量</span>
                    <div class="flex">
                      <div title="承担数量是指担任【项目经理或者副经理】的项目数量">
                        <span>承担</span><span class="fontIconStyle">{{ myProfile.bearProjectSum }}</span>
                      </div>
                      <div title="承担数量是指担任【项目成员】的项目数量">
                        <span>参与</span><span class="fontIconStyle">{{ myProfile.memberProjectSum }}</span>
                      </div>
                    </div>
                  </li>
                  <li>
                    <i class="iconfont-png icon-x"></i>
                    <span class="fontTextStyle">X总绩点</span>
                    <div class="flex">
                      <div title="预分配是项目审核后但没验收的绩点数">
                        <span>预分配</span><span class="fontIconStyle">{{ myProfile.xpoint }}</span>
                      </div>
                      <div title="已验收是项目已验收的绩点数">
                        <span>已验收</span><span class="fontIconStyle">{{ myProfile.xpointAudit }}</span>
                      </div>
                    </div>
                  </li>
                  <li>
                    <i class="iconfont-png icon-y"></i>
                    <span class="fontTextStyle">Y总绩点</span>
                    <div class="flex">
                      <div title="预分配是项目审核后但没验收的绩点数">
                        <span>预分配</span><span class="fontIconStyle">{{ myProfile.ypoint }}</span>
                      </div>
                      <div title="已验收是项目已验收的绩点数">
                        <span>已验收</span><span class="fontIconStyle">{{ myProfile.ypointAudit }}</span>
                      </div>
                    </div>
                  </li>
                  <li title="">
                    <i class="iconfont icon-core"></i>
                    <span class="fontTextStyle">总核心力值</span>
                    <div class="flex">
                      <div title="预分配是项目审核后但没验收的绩点数">
                        <span>预分配</span><span class="fontIconStyle">{{ myProfile.corePoint }}</span>
                      </div>
                      <div title="已验收是项目已验收的绩点数">
                        <span>已验收</span><span class="fontIconStyle">{{ myProfile.corePointAudit }}</span>
                      </div>
                    </div>
                  </li>
                  <li title="在科技技术库发布的技术文件数量">
                    <i class="iconfont icon-warehousing"></i>
                    <span class="fontTextStyle">技术入库数量</span>
                    <div class="flex">
                      <span class="fontIconStyle only">{{ myProfile.techSum }}</span>
                    </div>
                  </li>
                  <li title="在科技图书馆发布的文件数量">
                    <i class="iconfont icon-upload"></i>
                    <span class="fontTextStyle">图书馆文件数量</span>
                    <div class="flex">
                      <span class="fontIconStyle only">{{ myProfile.filePublishedSum }}</span>
                    </div>
                  </li>
                </ul>
              </div>
              <a-layout class="secondLayout">
                <a-layout-sider class="secondSider">
                  <div class="table-box">
                    <h3>我参与的项目</h3>
                    <a-table
                      class="hte-table-content"
                      :columns="perContributionColumns"
                      :data-source="perContributionData"
                      size="small"
                      :pagination="false"
                      rowKey="key"
                      :scroll="{ x: 680 }"
                      bordered
                    >
                    </a-table>
                  </div>
                </a-layout-sider>
                <a-layout-content class="secondContent">
                  <div class="table-box">
                    <h3>我报工的情况</h3>
                    <a-table
                      class="hte-table-content"
                      :columns="todolistColumns"
                      :data-source="todolistData"
                      size="small"
                      :pagination="false"
                      rowKey="key"
                      :scroll="{ x: 400 }"
                      bordered
                    >
                    </a-table>
                  </div>
                </a-layout-content>
              </a-layout>
              <a-layout class="secondLayout">
                <a-layout-content style="background-color: #fff; border: 1px solid #dcdfe6; margin-top: 16px">
                  <div class="table-box">
                    <h3>文件收藏<span style="margin-left:15px;font-size:13px;cursor: pointer;" title="点击进入科技图书馆，查看更多" @click="handlePage('/library/index/4')">更多></span></h3>
                    <a-input-group compact>
                      <a-input-search
                        style="width: 50%"
                        placeholder="按文件名称、文件编号模糊查询"
                        v-model="ipagination.keyword"
                        @search="myCollection"
                      />
                    </a-input-group>
                    <a-divider style="margin: 10px 0" />

                    <a-tooltip :visible="tooltipFlag">
                      <template slot="title"> 双击行可以查看文件明细 </template>
                      <a-table
                        class="hte-table-content"
                        :columns="fileColumns"
                        :data-source="fileListData"
                        size="small"
                        :scroll="{ x: false, y: 600 }"
                        :pagination="ipagination"
                        :rowKey="(record) => record.key"
                        :customRow="customRow"
                        @change="handleTableChange"
                      >
                      </a-table>
                    </a-tooltip>
                  </div>
                </a-layout-content>
              </a-layout>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import moment from 'moment'

export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'myProfile',
      },
      url: {
        getMyProfile: '/home/myProfileSearch',
        myCollection: '/home/queryToMyCollection',
      },
      myProfile: {},
      todolistColumns: [],
      fileColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          width: '15%',
          align: 'center',
        },
        {
          title: '文件名称',
          dataIndex: 'projectName',
          width: '31%',
          align: 'left',
        },
        {
          title: '文件编号',
          dataIndex: 'projectNo',
          width: '10%',
          align: 'center',
        },
        {
          title: '发布人',
          dataIndex: 'submitGuy',
          width: '12%',
          align: 'center',
        },
        {
          title: '发布时间',
          dataIndex: 'submitTime',
          width: '12%',
          align: 'center',
        },
      ],
      fileListData: [],
      todolistData: [],
      perContributionColumns: [
        {
          title: '项目等级',
          dataIndex: 'projectLevel',
          width: '100px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '数量',
          dataIndex: 'projectSum',
          width: '100px',
          align: 'center',
        },
        {
          title: 'X绩点',
          dataIndex: 'xpointAudit',
          width: '100px',
          align: 'center',
        },
        {
          title: 'Y绩点',
          dataIndex: 'ypointAudit',
          width: '100px',
          align: 'center',
        },
        {
          title: '核心力值',
          dataIndex: 'corePointAudit',
          width: '100px',
          align: 'center',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          align: 'left',
          width: '220px',
          ellipsis: true,
        },
      ],
      perContributionData: [],
      avatarUrl: '',
      navList: [
        {
          name: '我的项目',
          url: '/reportWork/queryPersonAchievement',
          icon: 'project2',
          title: '点击可进入报表中心查看我的项目情况',
        },
        {
          name: '我的绩点',
          url: '/reportWork/queryPersonPoint',
          icon: 'shuliang',
          title: '点击可进入报表中心查看我的绩点情况',
        },
        {
          name: '项目报工',
          url: '/reportWork/nodeReport',
          icon: 'list-view',
          title: '点击可进入报表中心查看项目报工情况',
        },
        {
          name: '合同报工',
          url: '/workReport/myTaskList',
          icon: 'list-view',
          title: '点击可进入合同报工页面查看报工情况',
        },
        {
          name: '奖励申报',
          url: '/reportWork/rewardApplyList',
          icon: 'currency',
          title: '点击可进入报表中心查看奖励申报情况',
        },
        {
          name: '项目变更',
          url: '/reportWork/projectChangeList',
          icon: 'file-editing',
          title: '点击可进入报表中心查看项目变更情况',
        },
        {
          name: '项目合同',
          url: '/workReport/projectList',
          icon: 'submit',
          title: '点击可进入项目合同页面查看合同情况',
        },
        {
          name: '报表中心',
          url: '/reportWork',
          icon: 'ccgl-fahuodanjindu-4',
          title: '点击可进入报表中心',
        },
        {
          name: '科研技术库',
          url: '/techList',
          icon: 'ccgl-fahuodanjindu-4',
          limit: 'tech:index',
          title: '点击可进入科研技术库',
          type: 'thinkTank',
        },
        {
          name: '工程技术库',
          url: '/engineeTech/list',
          icon: 'ccgl-fahuodanjindu-4',
          limit: 'engineeTech:index',
          title: '点击可进入工程技术库',
          type: 'thinkTank',
        },
        {
          name: '科技图书馆',
          url: '/library/index/4',
          icon: 'ccgl-fahuodanjindu-4',
          title: '点击可进入科技图书馆',
          type: 'thinkTank',
        },
      ],
      searchYear: '',
      yearList: [],
      ipagination: {
        keyword: '',
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['30', '50', '100'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      tooltipFlag: false,
    }
  },
  created() {
    this.avatarUrl =
      this.HTE_OLD_SERVER_URL +
      `/memberInfo/memberAvatar?memberName=${this.userinfo.info.username}&avatarType=1&bootToken=${Vue.ls.get(
        ACCESS_TOKEN
      )}`
  },
  mounted() {
    // 设置年份
    let year = parseInt(moment().format('YYYY'))
    this.searchYear = year
    for (var i = 0; i < 5; i++) {
      if (year - i < 2020) {
        break
      }
      this.yearList.push({ code: year - i, name: year - i + '年度' })
    }
    this.yearList.unshift({ code: '', name: '全部' })
    this.getTodoListData()
    this.myCollection()
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.myCollection()
    },
    customRow(record, index) {
      return {
        on: {
          dblclick: (event) => {
            var url = ''
            if (record.newHte == '0') {
              url = this.HTE_OLD_SERVER_URL + `${record.url}bootToken=${Vue.ls.get(ACCESS_TOKEN)}`
              // window.open(this.HTE_OLD_SERVER_URL+`${record.url}bootToken=${Vue.ls.get(ACCESS_TOKEN)}`,"_blank")
            } else {
              let urlJump = this.$router.resolve({ path: record.url })
              url = urlJump.href
            }
            window.open(url, '_blank')
          },
          mouseenter: (event) => {
            this.tooltipFlag = true
          },
          mouseleave: (event) => {
            this.tooltipFlag = false
          },
        },
      }
    },
    myCollection() {
      let queryParam = {}
      queryParam.pageNo = this.ipagination.current
      queryParam.pageSize = this.ipagination.pageSize
      queryParam.keyword = this.ipagination.keyword
      //queryParam.searchYear = this.searchYear
      getAction(this.url.myCollection, queryParam).then((res) => {
        if (res.code == 200) {
          this.fileListData = res.result.records.map((item, index) => {
            item.key = index
            return item
          })
          this.ipagination.totail = res.result.total
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
      })
    },
    changeYear() {
      this.getTodoListData()
      //this.myCollection()
    },
    getTodoListData() {
      getAction(this.url.getMyProfile, { searchYear: this.searchYear }).then((res) => {
        if (res.code == 200 && res.result) {
          this.myProfile = res.result
          // 我参与的项目汇总
          let count = 0,
            x = 0,
            y = 0,
            all = 0
          let list = res.result.projectDetailList || []
          list.forEach((item, index) => {
            item.key = index
            count += item.projectSum || 0
            x += item.xpointAudit || 0
            y += item.ypointAudit || 0
            all += item.corePointAudit || 0
          })
          list.push({
            key: list.length,
            projectLevel: '总计',
            projectSum: count,
            xpointAudit: x != 0 ? x.toFixed(2) : 0,
            ypointAudit: y != 0 ? y.toFixed(2) : 0,
            corePointAudit: all != 0 ? all.toFixed(2) : 0,
            projectName: '',
          })
          this.perContributionData = list
          // 我报工的情况
          let list2 = res.result.reportList || []
          this.todolistData = [
            { type: '总数', key: 1 },
            { type: '及时完成数', key: 2 },
            { type: '逾期完成数', key: 3 },
            { type: '逾期未完成数', key: 4 },
            { type: '报工及时率', key: 5 },
          ]
          this.todolistColumns = [
            {
              title: '汇总标题',
              dataIndex: 'type',
              width: '110px',
              align: 'left',
              ellipsis: true,
            },
          ]
          list2.forEach((item, index) => {
            this.todolistColumns.push({
              title: item.type,
              dataIndex: `project${index}`,
              width: '100px',
              align: 'center',
            })
            this.todolistData[0]['project' + index] = item.taskCount || 0
            this.todolistData[1]['project' + index] = item.completedCount || 0
            this.todolistData[2]['project' + index] = item.delayCompletedCount || 0
            this.todolistData[3]['project' + index] = item.delayInCompletedCount || 0
            if (typeof item.completionRate == 'number') {
              if (item.completionRate == 0) {
                this.todolistData[4]['project' + index] = '/'
              } else {
                this.todolistData[4]['project' + index] = (item.completionRate * 100).toFixed(2) + '%'
              }
            } else {
              this.todolistData[4]['project' + index] = item.completionRate
            }
          })
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
      })
    },
    handlePage(url) {
      if (!url) {
        this.$info({
          title: 'Hello，该模块正在火热建设中，暂时未上线',
        })
        return
      }
      let urlJump = this.$router.resolve({ path: url })
      window.open(urlJump.href, '_blank')
    },
  },
}
</script>
<style lang="less" scoped>
.todolist {
  background-color: #f4f5fa;
  min-height: 100vh;
  .container {
    padding: 0 125px 20px;
    height: inherit;
    .project-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      > div {
        background: #d1e5ff;
        border-radius: 4px;
        font-size: 14px;
        color: #106298;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: center;
        padding: 5px 9px;
        cursor: pointer;
        min-width: 88px;
        > i {
          font-size: 24px;
        }
        p {
          margin: 0;
        }
        &:nth-child(even) {
          margin-right: 0;
        }
        &:hover {
          background: #e6f7ff;
        }
        &.thinkTank{
          background: inherit;color: #fff;
          svg{width:37px;height: 37px;margin-bottom: 3px;}
          &:hover {
            background: #e6f7ff;color: #106298;
          }
        }
      }
    }
  }
}
.left {
  list-style: none;
  display: flex;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: left;
  margin-bottom: 0;
  padding: 0 0 0 0px;
  position: relative;
  margin: 20px;
  background-color: #F7F7F7;
  li {    
    padding: 20px;
    flex: 1;
    color: #2787c8;
    border: 1px solid #C1C1C1;
    border-right: none;
    &:nth-child(5),
    &:nth-child(6) {
      max-width: 160px;
    }
    i {
      font-size: 22px;
      display: block;
    }
    span {
      display: block;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      margin-top: 17px;
      font-weight: 500;
      font-size: 14px;
      color: #606266;
      > div {
        min-width: 50%;
      }
    }
    .fontIconStyle {
      font-weight: bold;
      font-size: 24px;
      color: #2787c8;
      word-break: break-all;
      line-height: 1;
      padding-top: 3px;
      &.only {
        margin-top: 21px;
      }
    }
    .fontTextStyle {
      font-weight: Bold;
      font-size: 16px;
      color: #303133;
    }
    .iconfont-png{
      width: 22px;
      height: 27px;
      background-repeat: no-repeat;
      margin-top: 6px;
      &.icon-x{background-image: url(../../assets/X.png);}
      &.icon-y{background-image: url(../../assets/Y.png);}
    }
    &:first-of-type {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-of-type {
      border-right: 1px solid #C1C1C1;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
.table-box {
  padding: 20px 32px;
  h3 {
    font-weight: Bold;
    margin-bottom: 13px;
    font-size: 16px;
    color: #303133;
    position: relative;
    padding-left: 13px;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      height: 70%;
      top: 15%;
      width: 4px;
      background: #4f81c4;
    }
    span {
      &:hover {
        color: #4f81c4;
      }
    }
  }
}
/deep/.ant-table-thead > tr > th,
.secondContent /deep/ .ant-table-tbody tr > td:first-of-type,
.secondSider /deep/ .ant-table-tbody tr:last-of-type td {
  background-color: #eff4f8 !important;
  font-weight: Bold;
  color: #485561;
}
.secondSider /deep/ .ant-table-scroll {
  ::-webkit-scrollbar-track {
    background: #eff4f8 !important;
  }
}
.secondContent {
  /deep/ .ant-table-thead > tr > th:first-of-type > span {
    display: none;
  }
}

/deep/ .ant-layout {
  background-color: #f4f5fa;
}
/deep/ .ant-layout-sider {
  margin-right: 16px;
  background-color: #4f81c4;
  margin-top: 16px;
  &.secondSider {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #fff;
    border: 1px solid #dcdfe6;
  }
}
/deep/ .ant-layout-content {
  margin-top: 16px;
  flex: unset;
  .firstDiv {
    border: 1px solid #dcdfe6;
    background-color: #fff;
  }
  .ant-select {    
    margin-left: 15px;
    &.select-width-200{
      width: 200px;
    }    
  }
  &.secondContent {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    margin-top: 16px;
  }
}
/deep/ .ant-avatar-circle {
  border: 2px solid #fff;
  border-radius: 100%;
}
/deep/ .ant-table-scroll {
  ::-webkit-scrollbar-track {
    background: transparent !important;
  }
  ::-webkit-scrollbar {
    height: 5px;
  }
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
  margin: 0;
}
@media (max-width: 1600px) {
  /deep/ .ant-layout.secondLayout {
    flex-wrap: wrap;
  }
  .ant-layout-content.secondContent,
  .ant-layout-sider.secondSider {
    min-width: 100% !important;
  }
}
</style>
